<template>
     <div style="height: 100%;" >
    <van-nav-bar title="修改密码" left-text="返回" left-arrow @click-left="goBack" />
    <van-form @submit="onChangePwd" style="width: 80%; height: 200px; margin-top: 100px; margin-left: 30px" >
        <span style="font-size: large; font-weight: bold; display: block; height: 25px">修改密码</span>
        <span style="font-style: italic; color: burlywood">仓库管理系统</span><br /><br />
        <van-field v-model="ChangePwdForm.username" name="用户名" placeholder="用户名" left-icon="user"
            style="border: 1px solid #cccccc; border-radius: 15px; line-height: 100%" autocomplete="false"
            label-width="30px" inset readonly /><br />
        <van-field v-model="ChangePwdForm.newPassword" type="password" name="新密码" placeholder="新密码" left-icon="lock"
            style="border: 1px solid #cccccc; border-radius: 15px; line-height: 100%" autocomplete="off" inset required :rules="[{ required: true, message: '请填写新密码' }]"/><br />
        <van-field v-model="ChangePwdForm.repeatPassword" type="password" name="确认密码" placeholder="确认密码"
            left-icon="lock" style="border: 1px solid #cccccc; border-radius: 15px; line-height: 100%"
            autocomplete="off" inset required/>
        <div style="margin: 16px">
            <van-button round block type="info" native-type="submit">修改密码</van-button>
        </div>
    </van-form>
</div>
</template>

<script>
export default {
    data() {
        return {
            ChangePwdForm: {},
        };
    },
    mounted() {
        //用户名
        this.ChangePwdForm = {
            username: localStorage.getItem("username"),
            newPassword: "",
            repeatPassword: ""
        }
    },
    methods: {
        //修改密码
        onChangePwd() {
            if (this.ChangePwdForm.newPassword !== this.ChangePwdForm.repeatPassword) {
                console.log(this.ChangePwdForm);
                this.$message({
                    message: "请输入相同的密码",
                    type: "error",
                });
            }else{
            this.changePwd();
            }
        },
        async changePwd() {
            let user = {
                username: this.ChangePwdForm.username,
                password: this.ChangePwdForm.newPassword,
            };
            const { data: res } = await this.$http.post("/changePassword", user);
            if (res.code == "200") {
                this.$router.push("/HomePage");
                this.$message({
                    message: "修改成功！",
                    type: "success",
                });
            } else {
                this.$message({
                    message: res.msg,
                    type: "error",
                });
            }
        },
        //返回
        goBack(){
            this.$router.push("/HomePage");
        }
    },
}
</script>

<style></style>